個別對齊：align-self

css

.special-item {
  align-self: flex-end;
  /*把這個 .special-item 元素，在父容器（使用 flex 排版）的垂直方向，對齊到「下方」（也就是交叉軸的底部）。*/
}

html

<div style="display: flex; height: 100px;">
  <div>項目</div>
  <div class="special-item">特殊</div>
  <div>項目</div>
</div>

伸縮比例：flex

css

.flex-grow-1 {
  flex: 1;
}

.flex-grow-2 {
  flex: 2;
}

html

<div style="display: flex;">
  <div class="flex-grow-1">1 份</div>
  <div class="flex-grow-2">2 份</div>
  <div class="flex-grow-1">1 份</div>
</div>

排序：order

css

.first { order: 1; }
.second { order: 2; }
.third { order: 3; }

html

<div style="display: flex;">
  <div class="third">HTML第一個（顯示第三）</div>
  <div class="first">HTML第二個（顯示第一）</div>
  <div class="second">HTML第三個（顯示第二）</div>
</div>